import { Application, Assets, Sprite } from "pixi.js";
import white from "@/assets/white.png";
import green from "@/assets/green.png";
import pink from "@/assets/pink.png";
import split from "@/assets/split.png";
import split1 from "@/assets/split1.png";
import split2 from "@/assets/split2.png";
import split3 from "@/assets/split3.png";
import split4 from "@/assets/split4.png";
const random = () => {
  const i = Math.round(Math.random() * 8);
  console.log(i);
  return [white, green, pink, split, split1, split2, split3, split4][i];
};
// Create a new application
const app = new Application();

// Initialize the application
await app.init({ background: "#000", resizeTo: window });

// Append the application canvas to the document body
document.body.appendChild(app.canvas);

export const createSprite = async (
  url: string,
  style = { x, y, width, height }
) => {
  console.log(style);
  const texture = await Assets.load(url);
  const sprite = new Sprite(texture);
  styleSprite(sprite, style);
  app.stage.addChild(sprite);
  return sprite;
};

export const styleSprite = (sprite, { x, y, width, height }) => {
  sprite.position.set(x, y);
  sprite.width = width;
  sprite.height = height;
};
export const draw = (rootNode) => {
  createSprite(random(), rootNode.getComputedLayout());
  const index = rootNode.getChildCount();
  if (index > 0) {
    for (let i = 0; i < index; i++) {
      const child = rootNode.getChild(i);
      draw(child);
    }
  }
};
